<template>
  <yd-ls-layout title="问医" >
    <div class="yd-ls-height"></div>
    <article class="yd-list yd-ls-seek-list yd-list-theme4">
      <div class="yd-ls-seek-list-box" v-for="(items,index) in seekList" :key="index">
        <router-link :to="{path: 'seekdetail', query:{drid: items.drid}}" class="yd-list-item yd-ls-seek-list-item">
          <div class="yd-list-img"><img :src="items.head || defalut_img"></div>
          <div class="yd-list-mes">
            <div class="yd-list-title">
              <span>
                <span>{{ items.name }}<i class="yd-tabbar-dot" v-if="items.unread"></i></span>
                <span class="yd-ls-me-arrow"></span>
              </span>
            </div>
            <div class="yd-list-other">
              <div>
                <p>{{ items.cust_name }} | {{ items.title }}</p>
              </div>
            </div>
          </div>
        </router-link>
        <div class="yd-grids-3 yd-ls-grids">
          <a class="yd-grids-item router-link-exact-active router-link-active"
             v-for="(datas,index) in items.visits"
             :key="index"
             @click="goApply(items.drid, datas.visit_type, datas.visit_id, datas.visit_remark, datas.pay_type, items.name)">
            <div class="yd-grids-txt" :class="datas.pay_type != 0 ? 'yd-ls-seek-on' : 'yd-ls-seek-off'">
              <p>{{ datas.visit_remark }}咨询</p>
              <span>{{ datas.pay_remark }}</span>
            </div>
          </a>
        </div>
      </div>
    </article>

    <yd-ls-default v-if="!seekList.length">暂无数据</yd-ls-default>
    <yd-ls-more v-if="total > seekList.length" @click.native="loadmore()"></yd-ls-more>
    <div class="yd-ls-height"></div>
  </yd-ls-layout>
</template>

<style>
  .yd-ls-grids .yd-grids-item {
    padding-top: 0;
  }
  .yd-ls-seek-on {
    padding: .1rem 0;
    margin: 0 .2rem;
    color: #fff;
    background-color: rgb(72, 112, 243);
  }
  .yd-ls-seek-off {
    padding: .1rem 0;
    margin: 0 .2rem;
    color: #f0f0f0;
    background-color: #d9d9d9;
  }
  .yd-ls-seek-on p,
  .yd-ls-seek-off p {
    font-weight: 600;
  }
  .yd-ls-seek-on span,
  .yd-ls-seek-off span {
    font-size: .24rem;
  }

  .yd-ls-seek-list .yd-list-item:not(:last-child):after {
    border-bottom: 0;
  }
  .yd-ls-seek-list-box {
    position: relative;
  }
  .yd-ls-seek-list-box:after {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #d9d9d9;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
  .yd-ls-seek-list .yd-list-mes {
    padding-top: .2rem;
  }

  .yd-ls-me-arrow:after {
    margin-left: .05rem;
    margin-right: -.08rem;
    display: block;
    font-family: YDUI-INLAY;
    font-size: .34rem;
    color: #c9c9c9;
    content: "\E608";
  }


  .yd-ls-seek-list.yd-list {
    padding: 0;
  }
  .yd-ls-seek-list.yd-list .yd-list-item {
    padding: 0.2rem 0.3rem;
    line-height: initial;
  }
  .yd-ls-seek-list.yd-list .yd-list-item .yd-list-img {
    width: 1.2rem;
    padding: 0.6rem 0;
    border-radius: 50%;
    margin-right: 0.2rem;
  }
  .yd-ls-seek-list.yd-list .yd-list-item .yd-list-mes .yd-list-other {
    padding-top: 0;
  }
  .yd-ls-seek-list.yd-list .yd-list-item .yd-list-title {
    padding-bottom: .1rem
  }
  .yd-ls-seek-list.yd-list .yd-list-item .yd-list-title span span:last-child{
    float: right;
    font-size: 12px;
    color: #919191;
    font-weight: normal;
  }
  .yd-ls-seek-list.yd-list .yd-list-item .yd-list-other p {
    padding-bottom: .05rem
  }
  .yd-ls-seek-list.yd-list .yd-list-item .yd-list-other .yd-ls-subscribe-address{
    width: 4rem;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
  }
  .yd-ls-seek-list.yd-list .yd-list-item .yd-list-mes .yd-list-title {
    font-size: .28rem;
  }

  .yd-ls-seek-list-item .yd-list-mes span span {
    position: relative;
  }
  .yd-ls-subscribe-list-item .yd-list-mes span .yd-tabbar-dot {
    margin-left: 0;
  }
</style>
<script>
  import ydLsLayout from '../../../components/yd-ls-layout.vue'
  import ydLsDefault from '../../../components/yd-ls-default.vue'
  import ydLsMore from '../../../components/yd-ls-more.vue'
  import api from '../../../axios/api'

  export default {
    name: 'seek',
    data() {
      return {
        seekList: [],
        pageIndex: 1,
        pageSize: 6,
        total: 0,
        defalut_img: api.default_img_dot // 医生缺省头像
      }
    },
    created() {
      //TODO:激活底部导航
      this.$store.dispatch('fetchBarActive', 'seek')
      //TODO: 初始化数据
      this.pageIndex = 1 // 重置初始值

      // this.$store.dispatch('fetchHomeUnread', sessionStorage.index_unread)
      // this.$store.dispatch('fetchMeUnread', sessionStorage.me_unread)

      //TODO:独立页面进入时
      if(!localStorage.openId){
        this.getOpenid()
      }else {
        this.getSeekList()
      }
    },
    methods: {
      init() {
      },
      getOpenid() {
        // 获取openid
        let _this = this;
        var src = window.location.search;
        var a = src.indexOf("code");
        var b = src.indexOf("&state");
        var code = src.substr(a + 5, b - (a + 5));

        this.axios({
          method: "get",
          url: api.wx_openid,
          params: {
            code: code,
            state: "STATE"
          },
          responseType: "text"
        })
          .then(rep => {
            localStorage.openId = rep.data;
            this.getAuthenticate();
          })
          .catch(err => {
            alert("OPENID_err" + JSON.stringify(err));
          });
      },
      getAuthenticate() {
        this.axios.get(api.get_authenticate).then(m => {
          this.getSeekList()
        });
      },
      getSeekList(type) {
        this.axios.get(api.seek_list, {
          params: {
            pageindex: this.pageIndex,
            pagesize: this.pageSize
          }
        }).then(m=>{
          let seek_data = m.data
          this.total = seek_data.pageinfo.total
          if(type === 'load'){
            this.seekList = this.seekList.concat(seek_data.data)
            return
          }
          this.seekList = seek_data.data
          this.getSeekUnread()
        });
      },
      loadmore(){
        this.pageIndex = this.pageIndex+1
        this.getSeekList('load')
      },
      goApply(drid, type, vid, vname, ptype, name) {
        if(type == 1){
          let vuex_msg = {drid: drid, drname: name}
          this.$store.dispatch('fetchMsgInfo', vuex_msg)
          window.location = `index.html#/message?type=seek&drid=${drid}&drname=${name}`
        }
        if(type != 1 && ptype != 0){
          sessionStorage.vName = vname
          sessionStorage.vType = type
          sessionStorage.vId = vid
          sessionStorage.vForm = 'seek'
          window.location = 'apply.html'
        }
        return
      },
      getHomeUnread() {
        this.axios.get(api.home_unread)
        .then(m=>{
            // 首页底部红点
            let home_unread_data = m.data
            this.isDot = home_unread_data.data.order_unread
            sessionStorage.index_unread = home_unread_data.data.index_unread
            this.$store.dispatch('fetchHomeUnread', sessionStorage.index_unread)
            this.getMeUnread()
        })
      },
      getMeUnread() {
        this.axios.get(api.me_unread)
        .then(m=>{
          //个人中心底部红点
          let me_unread_data = m.data
          sessionStorage.me_unread = me_unread_data.data.my_center_unread
          this.$store.dispatch('fetchMeUnread', sessionStorage.me_unread)
        })
      },
      getSeekUnread() {
        this.axios.get(api.seek_unread)
          .then(m=>{
            let seek_unread_data = m.data
            sessionStorage.seek_unread = seek_unread_data.data
            this.$store.dispatch('fetchSeekUnread', sessionStorage.seek_unread)
            this.getHomeUnread()
          })
      }
    },
    mounted() {
      this.init()
    },
    components: { ydLsLayout, ydLsDefault, ydLsMore }
  }
</script>
